<template>
	<view style="width: 750rpx;box-sizing: border-box;margin-top: 27.77rpx;padding:0 27.77rpx;">
		<checkbox-group @change="checkboxChange">
			<view v-for="(itme,index) in xuesheng" :key="index" style="display: flex;background: #FFFFFF;box-sizing: border-box;width: 694.6rpx;height: 155.832rpx;padding: 31.4rpx 27.18rpx;align-items: center;justify-content: space-between;border-radius: 24.15rpx;">
				<view style="display: flex;overflow: hidden;">
					<view>
						<image :src="itme.poto" style="width: 93rpx;height: 93rpx;border-radius: 50%;"></image>
					</view>
					<view style="margin: 10.27rpx 0 0 28.4rpx;">
						<view style="font-size: 29rpx;color: #383838;font-weight: bold;">{{itme.name}}</view>
						<view style="font-size: 29rpx;color: #BFBFBF;margin-top: 10rpx;">剩余课数 {{itme.num}}</view>
					</view>
				</view>
				<view>
					<checkbox :value="itme.name" :checked="itme.checked" color="#EE7B30" />
				</view>
			</view>
		</checkbox-group>
		<view style="position: fixed;width: 648.7rpx;height: 85.76rpx;line-height: 85.76rpx;background: #EE7B30;text-align: center;color: #FFFFFF;font-size: 29rpx;border-radius: 42.9rpx;bottom: 180rpx;left: 50.736rpx;" @tap="gopaike">
			完成
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				id:"",
				mechanism_id:"",
				num:1,
				xuesheng_list_:[],
				list:-1,
				xuesheng:[],
				bianli:[],
				canshu:{}
			}
		},
		methods:{
			gopaike(){
				let me = this
				let p = []
				if(me.bianli.length == 0){
					uni.navigateTo({
						url:"/pages/World/moreCurious/moreCurious?num=" + encodeURIComponent(JSON.stringify(me.canshu))
					})
				}else if(me.bianli.length > 0){
					me.bianli.forEach((itme) => {
						me.xuesheng_list_.forEach((itme_) => {
							if(itme == itme_.map.userInfo.nick_name){
								p.push(itme_)
							}
						})
					})
				}
				let data = {
					xuexheng:p
				}
				let list = Object.assign(data,me.canshu)
				uni.navigateTo({
					url:"/pages/World/moreCurious/moreCurious?num=" + encodeURIComponent(JSON.stringify(list))
				})
			},
			 checkboxChange: function (e) {
				let me = this
				me.bianli = []
				me.bianli = e.target.value
				var items = this.xuesheng,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.name)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			xuanze(index,itme){
				let me = this
				me.list = index
			},
		async	xuesheng_list(){
				let me = this
				const res = await me.$myRequest({
					url:"/userStudyCard/queryStudentList",
					data:{
						mechanism_id:me.mechanism_id,
						status:2,
						studycard_id:me.id,
						type:"mechanism_offline",
						pageSize:10,
						currentPage:me.num
					}
				})
				if(res.code == 0){
					me.xuesheng_list_ = res.data
					let d = []
					res.data.forEach((itme) => {
						let data ={
							poto:itme.map.userInfo.avatar,
							name:itme.map.userInfo.nick_name,
							num:itme.original_course_num
						}
						d.push(data)
					})
					me.xuesheng = d
				}
			}
		},
		onLoad(options) {
			
			let me = this
			const val =  JSON.parse(decodeURIComponent(options.num))
			me.id = val.id
			me.canshu = val
			if(val.xuexheng){
				delete val.xuexheng
			}
			try{
				me.mechanism_id = uni.getStorageSync('userif_list').mechanism_id 
			}catch(e){}
			me.xuesheng_list()
		},
		onShow() {
			
		}
	}
</script>
<style>
	.clc{
		border: 0.6rpx solid #EE7B30;
		background: #EE7B30;
	}
	.sty{
		border: 0.6rpx solid #A5A5A5;
		background: #FFFFFF;
	}
</style>